<template>
  <div class="person">
    <h1>Watch---ref2!!!</h1>
    <p>
      特点：监视 ref
      定义的【对象类型】数据，监视的是对象的地址值，若想见识对象内部属性的变化，需要手动开启深度监视
    </p>
    <span>姓名：{{ personMsg.name }}</span>
    <br />
    <span>年龄：{{ personMsg.age }}</span>
    <br />
    <br />
    <button @click="changeName">点我修改名字</button>
    <button @click="changeAge">点我修改年龄</button>
    <button @click="changePerson">点我换人</button>
  </div>
</template>


<script lang="ts" setup name="watch2Ref">
import { watch, ref } from 'vue'

const personMsg = ref({
  name: '小淳',
  age: 18
})

function changeName() {
  personMsg.value.name = '佳静'
}

function changeAge() {
  personMsg.value.age += 1
}

function changePerson() {
  personMsg.value = {
    name: '淳美女',
    age: 18
  }
}

// Watch的第一种用法:监视 ref定义的【对象类型】数据，监视的是对象的地址值，若想见识对象内部属性的变化，需要手动开启深度监视
// 若修改的是 ref 定义的对象中的属性，newValue 和 oldValue 都是新值，因为他们是同一个对象
// 若修改的是整个 ref 定义的对象，newValue是新值，oldValue 是旧值，因为不是同一个对象了
// Watch的第一个参数是：被监视的数据（personMsg）
// Watch的第二个参数是：监视的回调（(oldValue, newValue) => {console.log(oldValue, newValue)}）
// Watch的第三个参数是：配置对象（ { deep: true, immediate: true }）
const stopWatch = watch(
  personMsg,
  (oldValue, newValue) => {
    console.log(oldValue, newValue)
    // 没生效
    if (personMsg.value.age > 25) {
      stopWatch()
    }
  },
  // 若想监视对象内部属性的变化，需要手动开启深度监视
  { deep: true, immediate: true }
)
</script>

<style scoped>
.person {
  width: 600px;
  height: 240px;
  border-radius: 5px;
  padding: 10px;
  background-color: pink;
  box-shadow: 0 0 10px;
  padding: 5px;
}
button {
  margin: 6px 6px;
}
</style>
